<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人健康管理系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <style>
        body { background: #f5f5f5; }
        .core-card { background: #e8f5e9; border-radius: 12px; box-shadow: 0 2px 8px rgba(76,175,80,0.08); padding: 24px 18px; text-align: center; min-height: 120px; }
        .core-card h5 { color: #43a047; font-weight: bold; }
        .core-card .value { font-size: 2em; font-weight: bold; }
        .core-card .desc { color: #888; font-size: 0.95em; }
        .func-card { background: #fff; border-radius: 12px; box-shadow: 0 2px 8px rgba(76,175,80,0.08); padding: 18px 0; text-align: center; color: #388e3c; font-weight: bold; font-size: 1.1em; transition: transform 0.18s, box-shadow 0.18s; min-width: 110px; flex: 1; }
        .func-card:hover { transform: translateY(-6px) scale(1.04); box-shadow: 0 8px 24px rgba(76,175,80,0.18); color: #1b5e20; }
        .func-card i { font-size: 2em; margin-bottom: 8px; }
        .card-table { background: #fff; border-radius: 12px; box-shadow: 0 2px 8px rgba(76,175,80,0.08); padding: 18px 16px; margin-bottom: 18px; }
        .plan-card { background:#fff; border-radius:12px; box-shadow:0 2px 8px rgba(76,175,80,0.08); padding:14px 10px; min-width:180px; max-width:200px; }
        .plan-card img { height: 80px; object-fit: cover; border-radius: 8px; }
        .plan-card h6 { font-size: 1em; font-weight: bold; margin: 8px 0 4px 0; }
        .plan-card .badge { margin-right:4px; }
        .news-list { background: #fff; border-radius: 12px; box-shadow: 0 2px 8px rgba(76,175,80,0.08); padding: 16px 12px; }
        .news-list h5 { font-size: 1.1em; font-weight: bold; color: #388e3c; margin-bottom: 10px; }
        .news-list ul { padding-left: 18px; }
        .news-list li { margin-bottom: 8px; color: #444; }
        .footer-info { background: #e8f5e9; padding: 12px 0 0 0; text-align: center; color: #388e3c; font-size: 1em; }
        .footer-info .tips { margin-bottom: 6px; }
        .footer-info .copyright { color: #888; font-size: 0.95em; }
        .carousel-inner img { border-radius: 12px; }
    </style>
</head>
<body>
    <!-- 顶部绿色导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-success">
      <div class="container">
        <a class="navbar-brand fw-bold" href="#"><i class="fas fa-leaf me-2"></i>个人健康管理系统</a>
        <div class="d-flex align-items-center">
          <a href="/users" class="text-white me-3">个人中心</a>
          <a href="/logout" class="text-white">退出登录</a>
        </div>
      </div>
    </nav>
    <!-- 广告轮播 -->
    <div class="container my-3">
      <div id="adCarousel" class="carousel slide" data-bs-ride="carousel" data-bs-interval="5000">
        <div class="carousel-inner rounded shadow">
          <div class="carousel-item active">
            <img src="/image/ad1.jpg" class="d-block w-100" style="height:220px;object-fit:cover;" alt="夏季补水的5个误区">
            <div class="carousel-caption d-none d-md-block rounded p-2">
              <h5>夏季补水的5个误区</h5>
              <p>你喝对水了吗？</p>
            </div>
          </div>
          <div class="carousel-item">
            <img src="/image/ad2.jpg" class="d-block w-100" style="height:220px;object-fit:cover;" alt="科学减脂">
            <div class="carousel-caption d-none d-md-block rounded p-2">
              <h5>科学减脂</h5>
              <p>每天热量缺口多少最合适？</p>
            </div>
          </div>
          <div class="carousel-item">
            <img src="/image/ad3.jpg" class="d-block w-100" style="height:220px;object-fit:cover;" alt="蛋白质摄入建议">
            <div class="carousel-caption d-none d-md-block rounded p-2">
              <h5>蛋白质摄入建议</h5>
              <p>增肌/减脂都适用</p>
            </div>
          </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#adCarousel" data-bs-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="visually-hidden">上一条</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#adCarousel" data-bs-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="visually-hidden">下一条</span>
        </button>
      </div>
    </div>
    <!-- 核心数据区 -->
    <section class="container mb-4">
      <div class="row g-3 justify-content-center">
        <div class="col-6 col-md-3"><div class="core-card"><h5><i class="fas fa-weight"></i> 体重</h5><div class="value">65.0 <span class="desc">kg</span></div><div class="desc">较上周 -1.5kg</div></div></div>
        <div class="col-6 col-md-3"><div class="core-card"><h5><i class="fas fa-calculator"></i> BMI</h5><div class="value">22.5</div><div class="desc">正常范围</div></div></div>
        <div class="col-6 col-md-3"><div class="core-card"><h5><i class="fas fa-ruler-combined"></i> 体脂率</h5><div class="value">22.5 <span class="desc">%</span></div><div class="desc">较上周 -1.0%</div></div></div>
        <div class="col-6 col-md-3"><div class="core-card"><h5><i class="fas fa-fire"></i> 今日热量</h5><div class="value">850 <span class="desc">大卡</span></div><div class="desc">距目标还有 650 大卡</div></div></div>
      </div>
    </section>
    <!-- 主内容区：左右分栏 -->
    <main class="container">
      <div class="row">
        <!-- 左侧2/3 -->
        <div class="col-md-8">
          <!-- 功能导航 横排 -->
          <div class="d-flex flex-row gap-3 mb-3 justify-content-center">
            <a href="/dietplans" class="func-card"><i class="fas fa-clipboard-list"></i><div>饮食计划</div></a>
            <a href="/exercise-records" class="func-card"><i class="fas fa-running"></i><div>运动记录</div></a>
            <a href="/foods" class="func-card"><i class="fas fa-apple-alt"></i><div>食物库</div></a>
            <a href="/userhealthindices" class="func-card"><i class="fas fa-heartbeat"></i><div>健康指标</div></a>
            <a href="/users" class="func-card"><i class="fas fa-user-circle"></i><div>个人中心</div></a>
            <a href="/healthgoals/detail" class="func-card"><i class="fas fa-bullseye"></i><div>健康目标</div></a>
          </div>
          <!-- 近期饮食记录表格 -->
          <div class="card-table mb-3">
            <h6 class="mb-2 text-success"><i class="fas fa-utensils"></i> 近期饮食记录</h6>
            <table class="table table-hover align-middle mb-0">
              <thead>
                <tr>
                  <th>时间</th>
                  <th>食物</th>
                  <th>份量</th>
                  <th>热量 (大卡)</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>今天 12:30</td>
                  <td><img src="/image/food1.jpg" alt="鸡胸肉沙拉" class="rounded" style="width:32px;height:32px;object-fit:cover;margin-right:8px;">鸡胸肉沙拉</td>
                  <td>一份</td>
                  <td>350</td>
                </tr>
                <tr>
                  <td>今天 08:00</td>
                  <td><img src="/image/food2.jpg" alt="燕麦牛奶" class="rounded" style="width:32px;height:32px;object-fit:cover;margin-right:8px;">燕麦牛奶</td>
                  <td>一碗</td>
                  <td>200</td>
                </tr>
              </tbody>
            </table>
          </div>
          <!-- 近期运动记录表格 -->
          <div class="card-table mb-3">
            <h6 class="mb-2 text-success"><i class="fas fa-running"></i> 近期运动记录</h6>
            <table class="table table-hover align-middle mb-0">
              <thead>
                <tr>
                  <th>时间</th>
                  <th>运动类型</th>
                  <th>时长 (分钟)</th>
                  <th>消耗热量 (大卡)</th>
                  <th>达标占比</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>今天 18:00</td>
                  <td>跑步</td>
                  <td>30</td>
                  <td>300</td>
                  <td><div class="progress" style="height:8px;"><div class="progress-bar bg-warning" style="width:60%"></div></div></td>
                </tr>
                <tr>
                  <td>昨天 07:00</td>
                  <td>瑜伽</td>
                  <td>45</td>
                  <td>150</td>
                  <td><div class="progress" style="height:8px;"><div class="progress-bar bg-success" style="width:30%"></div></div></td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <!-- 右侧1/3 -->
        <div class="col-md-4">
          <!-- 推荐饮食计划 横滑 -->
          <div class="mb-3">
            <h6 class="mb-2 text-success"><i class="fas fa-star"></i> 推荐饮食计划</h6>
            <div class="d-flex overflow-auto gap-2 pb-2">
              <div class="plan-card"><img src="/image/plan1.jpg" alt="7天减脂计划"><h6>7天减脂计划</h6><span class="badge bg-warning text-dark">新手友好</span><span class="badge bg-success">好评率98%</span><div class="small text-muted">周期：7天</div></div>
              <div class="plan-card"><img src="/image/plan2.jpg" alt="增肌塑形计划"><h6>增肌塑形计划</h6><span class="badge bg-info text-dark">进阶训练者</span><span class="badge bg-success">好评率95%</span><div class="small text-muted">周期：30天</div></div>
              <div class="plan-card"><img src="/image/plan3.jpg" alt="均衡营养计划"><h6>均衡营养计划</h6><span class="badge bg-secondary text-light">全人群</span><span class="badge bg-success">好评率99%</span><div class="small text-muted">周期：长期</div></div>
            </div>
          </div>
          <!-- 健康资讯列表 -->
          <div class="news-list mb-3">
            <h5><i class="fas fa-info-circle"></i> 热门健康资讯</h5>
            <ul>
              <li><a href="/news/1" class="text-dark text-decoration-none">夏季补水的5个误区：你喝对水了吗？</a></li>
              <li><a href="/news/2" class="text-dark text-decoration-none">科学减脂：每天热量缺口多少最合适？</a></li>
              <li><a href="/news/3" class="text-dark text-decoration-none">蛋白质摄入建议：增肌/减脂都适用</a></li>
            </ul>
          </div>
        </div>
      </div>
    </main>
    <!-- 底部信息区 -->
    <footer class="footer-info mt-4">
      <div class="tips">【快捷添加】【小贴士轮播】</div>
      <div class="copyright">©2025 个人健康管理系统</div>
    </footer>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html> 